home *** CD-ROM | disk | FTP | other *** search
/ Freelog 125 / Freelog_MarsAvril2015_No125.iso / ViePratique / ArchiFacile / ArchiFacileSetup.exe / {app} / nw.pak / Unnamed File 000141.txt < prev    next >
Text File  |  2014-10-14  |  7KB  |  238 lines
  1. // Copyright (c) 2012 The Chromium Authors. All rights reserved.
  2. // Use of this source code is governed by a BSD-style license that can be
  3. // found in the LICENSE file.
  4.  
  5. /**
  6.  * @fileoverview This implements a table header.
  7.  */
  8.  
  9. cr.define('cr.ui.table', function() {
  10.   /** @const */ var TableSplitter = cr.ui.TableSplitter;
  11.  
  12.   /**
  13.    * Creates a new table header.
  14.    * @param {Object=} opt_propertyBag Optional properties.
  15.    * @constructor
  16.    * @extends {HTMLDivElement}
  17.    */
  18.   var TableHeader = cr.ui.define('div');
  19.  
  20.   TableHeader.prototype = {
  21.     __proto__: HTMLDivElement.prototype,
  22.  
  23.     table_: null,
  24.  
  25.     /**
  26.      * Initializes the element.
  27.      */
  28.     decorate: function() {
  29.       this.className = 'table-header';
  30.  
  31.       this.headerInner_ = this.ownerDocument.createElement('div');
  32.       this.headerInner_.className = 'table-header-inner';
  33.       this.appendChild(this.headerInner_);
  34.       this.addEventListener('touchstart',
  35.           this.handleTouchStart_.bind(this), false);
  36.     },
  37.  
  38.     /**
  39.      * Updates table header width. Header width depends on list having a
  40.      * vertical scrollbar.
  41.      */
  42.     updateWidth: function() {
  43.       // Header should not span over the vertical scrollbar of the list.
  44.       var list = this.table_.querySelector('list');
  45.       this.headerInner_.style.width = list.clientWidth + 'px';
  46.     },
  47.  
  48.     /**
  49.      * Resizes columns.
  50.      */
  51.     resize: function() {
  52.       var cm = this.table_.columnModel;
  53.  
  54.       var headerCells = this.querySelectorAll('.table-header-cell');
  55.       if (headerCells.length != cm.size) {
  56.         this.redraw();
  57.         return;
  58.       }
  59.  
  60.       for (var i = 0; i < cm.size; i++) {
  61.         headerCells[i].style.width = cm.getWidth(i) + 'px';
  62.       }
  63.       this.placeSplitters_(this.querySelectorAll('.table-header-splitter'));
  64.     },
  65.  
  66.     batchCount_: 0,
  67.  
  68.     startBatchUpdates: function() {
  69.       this.batchCount_++;
  70.     },
  71.  
  72.     endBatchUpdates: function() {
  73.       this.batchCount_--;
  74.       if (this.batchCount_ == 0)
  75.         this.redraw();
  76.     },
  77.  
  78.     /**
  79.      * Redraws table header.
  80.      */
  81.     redraw: function() {
  82.       if (this.batchCount_ != 0)
  83.         return;
  84.  
  85.       var cm = this.table_.columnModel;
  86.       var dm = this.table_.dataModel;
  87.  
  88.       this.updateWidth();
  89.       this.headerInner_.textContent = '';
  90.  
  91.       if (!cm || ! dm) {
  92.         return;
  93.       }
  94.  
  95.       for (var i = 0; i < cm.size; i++) {
  96.         var cell = this.ownerDocument.createElement('div');
  97.         cell.style.width = cm.getWidth(i) + 'px';
  98.         cell.className = 'table-header-cell';
  99.         if (dm.isSortable(cm.getId(i)))
  100.           cell.addEventListener('click',
  101.                                 this.createSortFunction_(i).bind(this));
  102.  
  103.         cell.appendChild(this.createHeaderLabel_(i));
  104.         this.headerInner_.appendChild(cell);
  105.       }
  106.       this.appendSplitters_();
  107.     },
  108.  
  109.     /**
  110.      * Appends column splitters to the table header.
  111.      */
  112.     appendSplitters_: function() {
  113.       var cm = this.table_.columnModel;
  114.       var splitters = [];
  115.       for (var i = 0; i < cm.size; i++) {
  116.         // splitter should use CSS for background image.
  117.         var splitter = new TableSplitter({table: this.table_});
  118.         splitter.columnIndex = i;
  119.         splitter.addEventListener('dblclick',
  120.                               this.handleDblClick_.bind(this, i));
  121.  
  122.         this.headerInner_.appendChild(splitter);
  123.         splitters.push(splitter);
  124.       }
  125.       this.placeSplitters_(splitters);
  126.     },
  127.  
  128.     /**
  129.      * Place splitters to right positions.
  130.      * @param {Array.<HTMLElement>|NodeList} splitters Array of splitters.
  131.      */
  132.     placeSplitters_: function(splitters) {
  133.       var cm = this.table_.columnModel;
  134.       var place = 0;
  135.       for (var i = 0; i < cm.size; i++) {
  136.         place += cm.getWidth(i);
  137.         splitters[i].style.webkitMarginStart = place + 'px';
  138.       }
  139.     },
  140.  
  141.     /**
  142.      * Renders column header. Appends text label and sort arrow if needed.
  143.      * @param {number} index Column index.
  144.      */
  145.     createHeaderLabel_: function(index) {
  146.       var cm = this.table_.columnModel;
  147.       var dm = this.table_.dataModel;
  148.  
  149.       var labelDiv = this.ownerDocument.createElement('div');
  150.       labelDiv.className = 'table-header-label';
  151.  
  152.       if (cm.isEndAlign(index))
  153.         labelDiv.style.textAlign = 'end';
  154.       var span = this.ownerDocument.createElement('span');
  155.       span.appendChild(cm.renderHeader(index, this.table_));
  156.       span.style.padding = '0';
  157.  
  158.       if (dm) {
  159.         if (dm.sortStatus.field == cm.getId(index)) {
  160.           if (dm.sortStatus.direction == 'desc')
  161.             span.className = 'table-header-sort-image-desc';
  162.           else
  163.             span.className = 'table-header-sort-image-asc';
  164.         }
  165.       }
  166.       labelDiv.appendChild(span);
  167.       return labelDiv;
  168.     },
  169.  
  170.     /**
  171.      * Creates sort function for given column.
  172.      * @param {number} index The index of the column to sort by.
  173.      */
  174.     createSortFunction_: function(index) {
  175.       return function() {
  176.         this.table_.sort(index);
  177.       }.bind(this);
  178.     },
  179.  
  180.     /**
  181.      * Handles the touchstart event. If the touch happened close enough
  182.      * to a splitter starts dragging.
  183.      * @param {TouchEvent} e The touch event.
  184.      */
  185.     handleTouchStart_: function(e) {
  186.       if (e.touches.length != 1)
  187.         return;
  188.       var clientX = e.touches[0].clientX;
  189.  
  190.       var minDistance = TableHeader.TOUCH_DRAG_AREA_WIDTH;
  191.       var candidate;
  192.  
  193.       var splitters = this.querySelectorAll('.table-header-splitter');
  194.       for (var i = 0; i < splitters.length; i++) {
  195.         var r = splitters[i].getBoundingClientRect();
  196.         if (clientX <= r.left && r.left - clientX <= minDistance) {
  197.           minDistance = r.left - clientX;
  198.           candidate = splitters[i];
  199.         }
  200.         if (clientX >= r.right && clientX - r.right <= minDistance) {
  201.           minDistance = clientX - r.right;
  202.           candidate = splitters[i];
  203.         }
  204.       }
  205.       if (candidate)
  206.         candidate.startDrag(clientX, true);
  207.       // Splitter itself shouldn't handle this event.
  208.       e.stopPropagation();
  209.     },
  210.  
  211.     /**
  212.      * Handles the double click on a column separator event.
  213.      * Ajusts column width.
  214.      * @param {number} index Column index.
  215.      * @param {Event} e The double click event.
  216.      */
  217.     handleDblClick_: function(index, e) {
  218.      this.table_.fitColumn(index);
  219.     }
  220.   };
  221.  
  222.   /**
  223.    * The table associated with the header.
  224.    * @type {cr.ui.Table}
  225.    */
  226.   cr.defineProperty(TableHeader, 'table');
  227.  
  228.   /**
  229.    * Rectangular area around the splitters sensitive to touch events
  230.    * (in pixels).
  231.    */
  232.   TableHeader.TOUCH_DRAG_AREA_WIDTH = 30;
  233.  
  234.   return {
  235.     TableHeader: TableHeader
  236.   };
  237. });
  238.